{% extends "deportes/base.html" %}

{% block title %}Deportes | {{deporte.nombre}}{% endblock %}
{% block extrahead %}
    
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css">
    <!--link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.demos.css"-->
    <!--link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css"-->
    
    <!--     jquery/../css's    -->
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.jqgrid.css" />
    
    <!--     jquery/../js's    -->
    <script src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_PREFIX }}js/jquery/jqGrid/i18n/grid.locale-es.js" type="text/javascript"></script>
    <script src="{{ STATIC_PREFIX }}js/jquery/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="{{ STATIC_PREFIX }}js/common.js" type="text/javascript"></script>
    <!-- ......................... -->
    
    
    <!--     jquery/acordion       -->
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.accordion.js"></script>
    <!-- ......................... -->
    
    
    <!--     jquery/tablesorter    -->
    <script type="text/javascript">
        $(document).ready(function() { 
            $.getJSON("/deportes/lista/federados/{{deporte.pk}}/cfg/", function(data){
                data['sortname'] = 'apellidos',
                data["colNames"] = ['Id','Nombre', 'Apellidos', 'Sexo'];
                $("#mygrid")
                .jqGrid(data)
                .navGrid('#pager', 
                    {add: false, edit: false, del: false, view: false},
                    {}, // edit options
                    {}, // add options
                    {}, // del options 
                    {multipleSearch:true, closeOnEscape:true, drag:true, closeAfterSearch: true}, // search options
                    {} // view options 
                );
                jQuery("#mygrid").jqGrid('navGrid',"#pager").jqGrid('navButtonAdd',"#pager",{caption:"Ver", buttonicon:"ui-icon-newwin", onClickButton:(function(event) {llamar_formulario('/atletas/ver/','')}), position:'first' ,title:"Ver"});
            });
        });
    </script>
    
    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>
    
{% endblock %}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href="/deportes/">Deportes</a> > Ver {% endblock %}

{% block content %}
<div id="main">
    <h1>{{deporte.nombre}}</h1>
    
    <h2>Atletas federados ({{cant_federados}})</h2>
    
    <div id="jqgrid">
        <table id="mygrid"></table>
        <div id="pager"></div>
    </div>
    
    <h2>Datos requeridos ({{cant_req}})</h2>
    <ul>
        {% for dato in datos_requeridos %}
            <li>{{dato}}</li>
        {% endfor %}
    </ul>
    
    
    <h2>Disciplinas ({{cant_disc}})</h2>
    <div id="accordion">
        {% for disciplina in deporte.disciplinas %}
        <h3><a href="#">{{disciplina.nombre}}</a></h3>
        <div>
            <h4>Tipo de resultado</h4>
            <ul><li>{{disciplina.tipo_resultado}}</li></ul>
            <h4>Categor&iacute;as</h4>
            <ul>
            {% for categoria in disciplina.categorias %}
                <li>{{categoria.nombre_completo}}</li>
            {% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>
<!--
    <br>
    <form action="/deportes/eliminar/{{ id }}/" method="post" align="right">
        {% csrf_token %}
        <input type="button" value="Eliminar" 
        onclick="if(confirm('¿Eliminar el deporte {{ deporte.nombre }}?')){
        document.forms[0].submit();
        }"/>
    </form>
-->

    <div class='buttons' align='right'>
        <!--input type='submit' value='Inicio' onclick="document.location = '../';"-->
        <input type='submit' value='Editar deporte' onclick="document.location = '/deportes/editar/{{deporte.pk}}';">
        <input type='submit' value='Regresar' onclick="document.location = '/deportes/';">        
    </div>

</div>
{% endblock %}
